<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第2次修改gitee</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-weight: bolder;
            border: 2px solid #000;
            border-radius: 10px;
            position: absolute;
            transition: all 1s;
        }

        button {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 300px;
            left: 45vw;
            border: 2px solid black;
            border-radius: 3px;
            transition: all 0.5s;
        }
        button:hover{
            background-color: #e9d1d1;
        }
    </style>
</head>

<body>
    <div id="div1" style="left: 200px;"></div>
    <div id="div2" style="left: 400px;"></div>
    <div id="div3" style="left: 600px;"></div>
    <div id="div4" style="left: 800px;"></div>
    <div id="div5" style="left: 1000px;"></div>
    <button id="jh">排序</button>
    <script>
        alert("这是一个可以将数字排序的网页")
        let jhs = document.getElementById("jh");
        let div1s = document.getElementById("div1");
        let div2s = document.getElementById("div2");
        let div3s = document.getElementById("div3");
        let div4s = document.getElementById("div4");
        let div5s = document.getElementById("div5");
        div1s.innerHTML = prompt("请输入第一个数字");
        while(div1s.innerHTML!=+div1s.innerHTML){div1s.innerHTML=prompt("你的输入有误，再输一次吧")}
        div2s.innerHTML = prompt("请输入第二个数字");
        while(div2s.innerHTML!=div2s.innerHTML){div2s.innerHTML=prompt("你的输入有误，再输一次吧")}
        div3s.innerHTML = prompt("请输入第三个数字");
        while(div3s.innerHTML!=+div3s.innerHTML){div3s.innerHTML=prompt("你的输入有误，再输一次吧")}
        div4s.innerHTML = prompt("请输入第四个数字");
        while(div4s.innerHTML!=+div4s.innerHTML){div4s.innerHTML=prompt("你的输入有误，再输一次吧")}
        div5s.innerHTML = prompt("请输入第五个数字");
        while(div5s.innerHTML!=+div5s.innerHTML){div5s.innerHTML=prompt("你的输入有误，再输一次吧")}


        let data = [+div1s.innerHTML, +div2s.innerHTML, +div3s.innerHTML, +div4s.innerHTML, +div5s.innerHTML];
        let data1 = [];
        let data2=[];
        let bug=true;

        for (let i = 0; i <= 4; i++) {
            data1[i] = data[i];
            data2[i] = data[i];
        }

        //赋值数组

        console.log(data1)
        let l = 0;
        jhs.onmousedown = function () {
            let M = data[0]
            for (i = 0; i <= 4; i++) {
                if (+M > data[i]) { M = data[i]; l = i; data1[0] = M; }
            }
            if(l==0){data1[0]=M}

            data.splice(l, 1);
            l=0;
            M = data[0]
            for (i = 0; i <= 3; i++) {
                if (+M > data[i]) { M = data[i]; l = i; data1[1] = M; }
            }
            if(l==0){data1[1]=M}

            data.splice(l, 1);
            l=0;
            M = data[0]
            for (i = 0; i <= 2; i++) {
                if (+M > data[i]) { M = data[i]; l = i; data1[2] = M;  }
            }
            if(l==0){data1[2]=M}

            data.splice(l, 1);
            l=0;
            M = data[0]
            for (i = 0; i <= 1; i++) {
                if (+M > data[i]) { M = data[i]; l = i; data1[3] = M;  }
            }
            if(l==0){data1[3]=M}

            data.splice(l, 1);
            if(bug){data1[4]=+data[0];bug=false;}
            
            
            console.log(data1)//输出打印排序后的数组
            
//声明各个矩形该移动的位置
            let div1mov,div2mov,div3mov,div4mov,div5mov;
            
            
            
                for(i=0;i<=4;i++){
                    if(data2[0]==data1[i]){div1mov=(i+1)*200;break;}
            }
                for(i=0;i<=4;i++){
                    if(data2[1]==data1[i]){div2mov=(i+1)*200;break;}
            }
                for(i=0;i<=4;i++){
                    if(data2[2]==data1[i]){div3mov=(i+1)*200;break;}
            }
                for(i=0;i<=4;i++){
                    if(data2[3]==data1[i]){div4mov=(i+1)*200;break;}
            }
                for(i=0;i<=4;i++){
                    if(data2[4]==data1[i]){div5mov=(i+1)*200;break;}
            }
            div1s.style.left=+div1mov+"px";
            div2s.style.left=+div2mov+"px";
            div3s.style.left=+div3mov+"px";
            div4s.style.left=+div4mov+"px";
            div5s.style.left=+div5mov+"px";
        }


    </script>
</body>

</html>